<script setup>
import {usePromptStore} from "@/stores/PromptStore.js";
import {ref} from 'vue'
import {ElMessage} from 'element-plus'

const promptStore = usePromptStore()

// detail dialog
const detailDialog = ref(false)

// edit dialog
const editDialog = ref(false)

// add dialog
const addDialog = ref(false)

const formLabelWidth = '140px'

// detail表单对象
const detailForm = ref({})

// addForm 新增prompt
const addForm = ref({
  prompt_name: "",
  prompt_content: "",
  prompt_type: ""
})


const handleDetail = async (index) => {
  let prompt_id = promptStore.promptList[index].prompt_id
  detailForm.value = await promptStore.detailPrompt(prompt_id)
  detailDialog.value = true
}

const handleEdit = async (index) => {
  let prompt_id = promptStore.promptList[index].prompt_id
  detailForm.value = await promptStore.detailPrompt(prompt_id)
  editDialog.value = true
}
const handleDelete = async (index, row) => {
  console.log(index, row)
  const delPromptId = promptStore.promptList[index].prompt_id
  const data = await promptStore.delPrompt(delPromptId)

  if (data.data === 1) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await promptStore.listPrompt()
}

const confirmModifyPrompt = async () => {
  const modifyObject = {
    prompt_id: detailForm.value.prompt_id,
    prompt_name: detailForm.value.prompt_name,
    prompt_content: detailForm.value.prompt_content,
    prompt_type: detailForm.value.prompt_type
  }

  let data = await promptStore.modifyPrompt(modifyObject)
  if (data.data === 1) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await promptStore.listPrompt()
  editDialog.value = false

}

const confirmAddPrompt = async () => {
  const data = await promptStore.addPrompt(addForm.value)
  if (typeof data.data === 'number' && !isNaN(data.data)) {
    ElMessage({
      message: data.description,
      type: "success"
    })
  } else {
    ElMessage({
      message: data.description,
      type: "error"
    })
  }

  await promptStore.listPrompt()
  addDialog.value = false

  addForm.value = {
    prompt_name: "",
    prompt_content: "",
    prompt_type: ""
  }
}


</script>

<template>
  <div id="add">
    <el-button type="primary" id="button-add" @click="addDialog = true">新建</el-button>
  </div>
  <el-table :data="promptStore.promptList" style="width: 100%">
    <el-table-column label="创建时间" width="180" fixed>
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.create_at }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="prompt名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.prompt_name }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="prompt类型" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.prompt_type == 1 ? "私有模型" : "普通模型" }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="最新更新时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.update_at }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column fixed="right">
      <template #default="scope">
        <el-button
            size="small"
            type="success"
            @click="handleDetail(scope.$index, scope.row)"
        >
          详情
        </el-button>

        <el-button
            size="small"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
        >
          编辑
        </el-button>

        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 详细dialog -->
  <el-dialog v-model="detailDialog" title="详情" width="500" :close-on-click-modal=false>
    <el-form :model="detailForm" disabled>
      <el-form-item label="prompt名称" :label-width="formLabelWidth">
        <el-input v-model="detailForm.prompt_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="prompt类型" :label-width="formLabelWidth">
        <el-input v-model="detailForm.prompt_type" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="detailForm.create_at" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="最近更新时间" :label-width="formLabelWidth">
        <el-input v-model="detailForm.update_at" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="prompt内容">
        <el-input v-model="detailForm.prompt_content" type="textarea"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialog = false">Cancel</el-button>
        <el-button type="primary" @click="detailDialog = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  编辑dialog-->
  <el-dialog v-model="editDialog" title="详情" width="500" :close-on-click-modal=false>
    <el-form :model="detailForm">
      <el-form-item label="prompt名称" :label-width="formLabelWidth">
        <el-input v-model="detailForm.prompt_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="prompt类型" :label-width="formLabelWidth">
        <el-input v-model="detailForm.prompt_type" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="detailForm.create_at" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="最近更新时间" :label-width="formLabelWidth">
        <el-input v-model="detailForm.update_at" autocomplete="off" disabled/>
      </el-form-item>

      <el-form-item label="prompt内容">
        <el-input v-model="detailForm.prompt_content" type="textarea"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialog = false">Cancel</el-button>
        <el-button type="primary" @click="confirmModifyPrompt">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--新增框-->
  <el-dialog v-model="addDialog" title="新增prompt" width="500" :close-on-click-modal=false>
    <el-form :model="addForm">
      <el-form-item label="prompt名称" :label-width="formLabelWidth">
        <el-input v-model="addForm.prompt_name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="prompt类型">
        <el-select v-model="addForm.prompt_type" placeholder="please select your prompt type">
          <el-option label="普通模型" value=0 />
          <el-option label="私有模型" value=1 />
        </el-select>
      </el-form-item>


      <el-form-item label="prompt内容">
        <el-input v-model="addForm.prompt_content" type="textarea"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">Cancel</el-button>
        <el-button type="primary" @click="confirmAddPrompt">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
#button-add {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
}
</style>